<template>
    <view
        class="banner translate-y-0 swiper-class" 
        v-if="content.data.length && content.enabled"
    >
        <swiper
            class="swiper h-full"
            :indicator-dots="content.data.length > 1"
            indicator-active-color="#00bb78"
            :autoplay="true"
			circular
        >
            <swiper-item
                v-for="(item, index) in content.data"
                :key="index"
                @click="handleClick(item.link)"
            >
            <!--   <u-image
                    mode="widthFix"
                    width="100%"
                    :src="getImageUrl(item.image)"
                /> -->
				<image :src="getImageUrl(item.image)" mode="widthFix" style="width: 100%;"></image>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores/app'
import { navigateTo } from '@/utils/util'

const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    }
})
const { getImageUrl } = useAppStore()
const handleClick = (link: any) => {
    navigateTo(link)
}
</script>

<style lang="scss" scoped>
	.swiper-class{
		// position: absolute;
		// top: ;
		height: 500rpx;
	}
</style>
